<template>
	<div>
		<div class="template" v-show="Loading">
			<div><mt-spinner :type="3" :size="60"></mt-spinner></div>
		</div>
		<header class="navigation">
			<div @click="retreat"><img src="../assets/rightbut.png"></div>
			<div>查看列表</div>
			<div></div>
		</header>
		<div class="type" v-if='type != "hq"'>
			<div @click="synthesizeSorton">{{synthesizeSort}}<img src="../assets/images1/propup.png"></div>
			<div @click="salesvolumeSorton">{{salesvolumeSort}}<img src="../assets/images1/propup.png"></div>
			<div @click="redPacketSorton">{{redPacketSort}}<img src="../assets/images1/propup.png"></div>
		</div>
		<div class="sellType" v-show='synthesize'>
			<div v-for="item in synthesizeList" @click="synthesizeListon(item.name,item.orderType)">{{item.name}}</div>
		</div>
		<div class="sellType" v-show='redPacket'>
			<div v-for='item in redPacketList' @click="redPacketListon(item.name,item.orderType)">{{item.name}}</div>
		</div>
		<div class="sellType" v-show='salesvolume'>
			<div v-for='item in salesvolumeList' @click="salesvolumeListon(item.name,item.orderType)">{{item.name}}</div>
		</div>
		
		
		<div class="hot">
			<ul v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="20">
				<li v-for='item in hot' v-if="item.spuPlatform == 'jd'" @click="jd(item.id,item.couponMoney)">
					<div class="hotList">
						<div class="hotImg">
							<img :src="item.mainImageUrl">
							<i class="jdSymbol" v-if="item.spuPlatform == 'jd'"></i>
							<i class="yhSymbol" v-if="item.spuPlatform == 'yh'"></i>
						</div>
						<div class="hotName">{{item.goodsName}}</div>
						<div class="hotPrice">
							<div>￥{{item.price}} / </div>
							<div>降{{item.couponMoney}}</div>
						</div>
						<div class="cashPrice">
							<div>￥{{item.conPrice}}</div>
							<div>已抢件{{item.totalSales}}</div>
						</div>
						<div class="immediately">立即抢购</div>
					</div>
				</li>
				
				<li v-for='item in hot' v-if="item.spuPlatform == 'yh'" @click="yh(item.id)">
					<div class="hotList">
						<div class="hotImg">
							<img :src="item.mainImageUrl">
							<i class="jdSymbol" v-if="item.spuPlatform == 'jd'"></i>
							<i class="yhSymbol" v-if="item.spuPlatform == 'yh'"></i>
						</div>
						<div class="hotName">{{item.goodsName}}</div>
						<div class="hotPrice">
							<div>￥{{item.price}} / </div>
							<div>降{{item.couponMoney}}</div>
						</div>
						<div class="cashPrice">
							<div>￥{{item.conPrice}}</div>
							<div>已抢件{{item.totalSales}}</div>
						</div>
						<div class="immediately">立即抢购</div>
					</div>
				</li>
				
				<li v-for='item in hot' v-if="item.spuPlatform == 'pdd'" @click="pdd(item.id)">
					<div class="hotList">
						<div class="hotImg">
							<img :src="item.mainImageUrl">
							<i class="jdSymbol" v-if="item.spuPlatform == 'jd'"></i>
							<i class="yhSymbol" v-if="item.spuPlatform == 'yh'"></i>
							<i class="pddSymbol" v-if="item.spuPlatform == 'pdd'"></i>
						</div>
						<div class="hotName">{{item.goodsName}}</div>
						<div class="hotPrice">
							<div>￥{{item.price}} / </div>
							<div>降{{item.couponMoney}}</div>
						</div>
						<div class="cashPrice">
							<div>￥{{item.conPrice | keep}}</div>
							<div>已抢件{{item.totalSales}}</div>
						</div>
						<div class="immediately">立即抢购</div>
					</div>
				</li>
				
				<li v-for='item in hot' v-if="item.spuPlatform == 'tb'" @click="skipon(item.couponUrl)">
					<div class="hotList">
						<div class="hotImg">
							<img :src="item.mainImageUrl">
							<i class="jdSymbol" v-if="item.spuPlatform == 'jd'"></i>
							<i class="yhSymbol" v-if="item.spuPlatform == 'yh'"></i>
							<i class="pddSymbol" v-if="item.spuPlatform == 'pdd'"></i>
						</div>
						<div class="hotName">{{item.goodsName}}</div>
						<div class="hotPrice">
							<div>￥{{item.price}} / </div>
							<div>降{{item.couponMoney}}</div>
						</div>
						<div class="cashPrice">
							<div>￥{{item.conPrice | keep}}</div>
							<div>已抢件{{item.totalSales}}</div>
						</div>
						<div class="immediately">立即抢购</div>
					</div>
				</li>
				
				<!--<li v-for='item in hot' v-if="item.spuPlatform == 'tm'" @click="skipon(item.couponUrl)">
					<div class="hotList">
						<div class="hotImg">
							<img :src="item.mainImageUrl">
							<i class="jdSymbol" v-if="item.spuPlatform == 'jd'"></i>
							<i class="yhSymbol" v-if="item.spuPlatform == 'yh'"></i>
							<i class="pddSymbol" v-if="item.spuPlatform == 'pdd'"></i>
						</div>
						<div class="hotName">{{item.goodsName}}</div>
						<div class="hotPrice">
							<div>￥{{item.price}} / </div>
							<div>降{{item.couponMoney}}</div>
						</div>
						<div class="cashPrice">
							<div>￥{{item.conPrice | keep}}</div>
							<div>已抢件{{item.totalSales}}</div>
						</div>
						<div class="immediately">立即抢购</div>
					</div>
				</li>-->
				
				<!--<li v-for='item in hot' v-if="item.spuPlatform == 'hq'" @click="skipon(item.couponUrl)">
					<div class="hotList">
						<div class="hotImg">
							<img :src="item.mainImageUrl">
							<i class="jdSymbol" v-if="item.spuPlatform == 'jd'"></i>
							<i class="yhSymbol" v-if="item.spuPlatform == 'yh'"></i>
							<i class="pddSymbol" v-if="item.spuPlatform == 'pdd'"></i>
						</div>
						<div class="hotName">{{item.goodsName}}</div>
						<div class="hotPrice">
							<div>￥{{item.price}} / </div>
							<div>降{{item.couponMoney}}</div>
						</div>
						<div class="cashPrice">
							<div>￥{{item.conPrice | keep}}</div>
							<div>已抢件{{item.totalSales}}</div>
						</div>
						<div class="immediately">立即抢购</div>
					</div>
				</li>-->
				
			</ul>
		</div>
		
	</div>
</template>

<script>
	import { BaseUrl } from '../Baseurl/common.js';
	import { InfiniteScroll } from 'mint-ui';
	import { Toast } from 'mint-ui';
	export default {
		data(){
			return{
				synthesize:false,
				redPacket:false,
				salesvolume:false,
				synthesizeSort:'综合排序',
				redPacketSort:'红包排序',
				salesvolumeSort:'销量优先',
				synthesizeList:[{name:'综合排序',orderType:''},{name:'价格由高到底',orderType:'priceDesc'},{name:'价格由底到高',orderType:'priceAsc'}],
				redPacketList:[{name:'红包由高到底',orderType:'couponMoneyDesc'},{name:'红包由底到高',orderType:'couponMoneyAsc'}],
				salesvolumeList:[{name:'销量由高到低',orderType:'totalSalesDesc'},{name:'销量由低到高',orderType:'totalSalesAsc'}],
				hot:[],
				index: 0,
				orderType:'',
				type:'',     //商品type值
				keyword:'',
				loading:'',
				Loading:true,
				adazone_id:''
			}
		},
		created(){
			this.type = this.$route.query.type;
			this.keyword = this.$route.query.goodsName;
		},
		filters:{
			keep:function(val){
				val = Number(val)
				return val.toFixed(2)
			}
		},
		methods:{
			//导航退后
			retreat:function(){
				window.history.go(-1);
			},
			//综合排序
			synthesizeSorton:function(){
				this.synthesize = !this.synthesize;
			},
			//销量排序
			salesvolumeSorton:function(){
				this.salesvolume = !this.salesvolume;
			},
			//红包
			redPacketSorton:function(){
				this.redPacket = !this.redPacket;
			},
			//综合
			synthesizeListon:function(name,orderType){
				this.synthesize = !this.synthesize;
				this.synthesizeSort = name;
				this.orderType = orderType;
				this.hot = [];
				this.index= 0;
				this.singInfo(this.index,this.orderType);
			},
			//红包
			redPacketListon:function(name,orderType){
				this.redPacket = !this.redPacket;
				this.redPacketSort = name;
				this.orderType = orderType;
				this.hot = [];
				this.index= 0;
				this.singInfo(this.index,this.orderType);
			},
			//销量
			salesvolumeListon:function(name,orderType){
				this.salesvolume = !this.salesvolume;
				this.redPacketSort = name;
				this.orderType = orderType;
				this.hot = [];
				this.index= 0;
				this.singInfo(this.index,this.orderType);
			},
			//商品跳转
			jd:function(id, couponMoney){
				this.commodity(id, couponMoney);  //全局事件
			},
			yh:function(id){
				this.yhcommodity(id);// 全局事件
			},
			pdd:function(id){
				this.pddcommodity(id);// 全局事件
			},
			singInfo(index,orderType) {
				this.adazone_id = localStorage.getItem('adazone_id')
				this.Loading = true;
				if(this.type != 'hq'){
					var url = BaseUrl + 'goods/list?start= ' + index + '&length=10' +'&orderType='+ this.orderType + '&type=' +this.type + '&keyword=' + this.keyword;
					this.$http.get(url).then(res=>{
						this.Loading = false;
						if(res.data.code == '10000'){
								this.hot = this.hot.concat(res.data.data.list);
							if(res.data.data.isMore == "none") {
								this.loading = true;
								return;
							} else if(res.data.data.isMore == "have") {
								this.loading = false;
								this.index++;
							}
						}
					}).catch(error=>{
						this.Loading = false;
						Toast({
							message: "网络异常",
							position: 'middle',
							duration: 3000
						})
					})
				}else if(this.type == 'hq'){
					var _index = index + 1 
					var url = BaseUrl + 'tb/getfavitemByfavIds?adazone_id=' + this.adazone_id + '&q=' + this.keyword + '&pageNo=' + _index  + '&pageSize=10' + '&type=' + "";
					this.$http.post(url).then(res=>{
						this.Loading = false;
						if(res.data.code == '10000'){
								this.hot = this.hot.concat(res.data.data);
								if(res.data.isMore == "no"){
									this.loading = true;
									return;
								}else if(res.data.isMore == "have"){
									this.loading = false;
									this.index++;
								}
						}
					}).catch(error=>{
						this.Loading = false;
						Toast({
							message: "网络异常",
							position: 'middle',
							duration: 3000
						})
					})
				}
//				else{
//					var url = BaseUrl + 'tb/getwlbyq?adazone_id=' + this.adazone_id + '&q=' + this.keyword + '&pageNo='+ index + '&type=' + this.type + '&pageSize=10'
//					this.$http.post(url).then(res=>{
////						console.log(res.data)
//						this.Loading = false;
//						if(res.data.code == '10000'){
//								this.hot = this.hot.concat(res.data.data);
//								if(res.data.isMore == "none"){
//									this.loading = true;
//									return;
//								}else if(res.data.isMore == "have"){
//									this.loading = false;
//									this.index++;
//								}
//						}
//					}).catch(error=>{
//						this.Loading = false;
//						Toast({
//							message: "网络异常",
//							position: 'middle',
//							duration: 3000
//						})
//					})
//					
//				}
				
			},loadMore() {
				this.loading = this.loading;
				if(this.loading == false){
					setTimeout(() => {
						this.singInfo(this.index);
						this.loading = this.loading;
					}, 100);
				}
			},
			skipon:function(val){
				window.location.href = val;
			}
		},
	}
</script>

<style scoped="scoped">
	.template{
		width: 100%;
		height: 100%;
		background: rgba(0,0,0,0.5);
		position: absolute;
		z-index: 99;
	}
	.template div{
		position: absolute;
		top: 5.5rem;
		left: 50%;
		margin-left: -0.6rem;
	}
	.navigation{
		height: 1rem;
		background: #fafafa;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 0.24rem;
		color: #323232;
		font-size: 0.36rem;
		font-weight: bold;
	}
	.navigation img{
		width: 0.2rem;
		height: 0.36rem;
		display: block;
	}
	.type{
		height: 1rem;
		background: #fff;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}
	.type div{
		color: #6f6f6f;
		font-size:0.36rem ;
	}
	.type img{
		width: 0.3rem;
		height: 0.2rem;
		margin-left: 0.1rem;
	}
	.sellType{
		width: 100%;
		padding: 0 0.2rem;
		background: #fff;
		color: #6f6f6f;
		font-size:0.36rem ;
		position: absolute;
	}
	.sellType div{
		padding: 0.1rem 0;
		border-bottom: 1px solid #ccc;
	}
	
	.hot ul{
		height: 11rem;
		overflow-y: auto;
	}
	.hotList{
		width: 49%;
		padding: 0.1rem 0.2rem;
		float: left;
	}
	.hotImg{
		width: 100%;
		height: 3.2rem;
		margin-bottom: 0.1rem;
	}
	.hotImg img{
		width: 100%;
		height: 3.2rem;
	}
	.hotName{
		height: 0.6rem;
		display: -webkit-inline-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
		color: #878787;
		font-size: 0.26rem;
		line-height: 1.2;
		width: 100%;
	}
	.hotName img{
		width: 0.7rem;
		height: 0.3rem;
	}
	.hotPrice{
		display: flex;
		font-size: 0.2rem;
	}
	.hotPrice div:nth-child(1){
		color: #9a9a9a;
		text-decoration: line-through;
		margin-right: 0.1rem;
	}
	.hotPrice div:nth-child(2){
		color: #ff2040;
	}
	.cashPrice{
		font-size: 0.26rem;
		margin: 0.1rem 0 0.1rem 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.cashPrice div:nth-child(1){
		color: #ff2040;
		font-weight: bold;
	}
	.cashPrice div:nth-child(2){
		color: #878787;
	}
	.immediately{
		border-radius: 0.4rem;
		text-align: center;
		padding: 0.1rem 0;
		background: #ff2040;
		color: #fff;
	}
	.jdSymbol {
		width: 0.67rem;
		height: 0.67rem;
		background: url(../assets/jd.png);
		background-size: 100% 100%;
		display: block;
		position: relative;
		margin-top: -0.755rem;
		float: right;
	}
	.yhSymbol {
		width: 0.67rem;
		height: 0.67rem;
		background: url(../assets/yh.png);
		background-size: 100% 100%;
		display: block;
		position: relative;
		margin-top: -0.755rem;
		float: right;
	}
	.pddSymbol {
		width: 0.67rem;
		height: 0.67rem;
		background: url(../assets/pdd.png);
		background-size: 100% 100%;
		display: block;
		position: relative;
		margin-top: -0.755rem;
		float: right;
	}
</style>